<template>
    <a-form-item :label="model.title" :name="meta.id" :rules="model.rules" @dblclick="() => toggleMetaToEdit(meta)"
       :extra="model.extra" @click.native.stop="activeMetaTo" class="ivz-item-draggable" :class="activeClass">
      <a-rate v-if="meta.type == 'rate'" :disabled="model.disabled"
              :allowHalf="model.allowHalf" :count="model.count" v-model:value="model[meta.id]" />
      <a-slider v-else-if="meta.type == 'slider'" :disabled="model.disabled" v-model:value="model[meta.id]"
                :min="model.min" :max="model.max" :step="model.step" :marks="model.marks" :range="model.range"/>
      <a-switch v-else-if="meta.type == 'switch'" :checkedChildren="model['checkedChildren']" :disabled="model.disabled"
                v-model:value="model[meta.id]" :unCheckedChildren="model['unCheckedChildren']"/>
      <a-input v-else-if="meta.type == 'text'" v-model:value="model[meta.id]" :placeholder="model.placeholder"
               :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled" />
      <a-select v-else-if="meta.type == 'select'" :placeholder="model.placeholder" :options="model.options"
        :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled"
        :mode="model.mode" v-model:value="model[meta.id]" :maxTagCount="model.maxTagCount"
        :showSearch="model.showSearch"/>
      <a-radio-group v-else-if="meta.type == 'radio'" :options="model.options"
          :disabled="model.disabled" v-model:value="model[meta.id]" />
      <ivz-date-time v-else-if="meta.type == 'date'" :placeholder="model.placeholder"
         :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled" :type="model.dateType"
         :format="model.format" :showTime="model.showTime" :showToday="model.showToday" v-model:value="model[meta.id]" />
      <a-checkbox-group v-else-if="meta.type == 'checkbox'" :options="model.options" v-model:value="model[meta.id]" />
      <a-tree-select v-else-if="meta.type == 'stree'" :placeholder="model.placeholder" :treeData="model.options"
         :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled" v-model:value="model[meta.id]"
         :multiple="model.multiple" />
      <a-input-number v-else-if="meta.type == 'number'" :placeholder="model.placeholder" style="width: 100%"
        :allowClear="model.clear" :read-only="model.readonly" :disabled="model.disabled" :precision="model.precision"
        :min="model.min" :max="model.max" :step="model.step" v-model:value="model[meta.id]" />
      <IvzSearchForeignItem v-else-if="meta.type == 'quote'" :meta="meta" :model="model"/>
      <IvzSearchForeignItem v-else-if="meta.type == 'foreign'" :meta="meta" :model="model" />
    </a-form-item>
</template>

<script>
import {mapMutations} from "vuex";
import {getSearchFormTabMetas} from "@/metas/SearchFormMetas";
import {IvzDateTime} from "@/components/functional";
import ActiveMetaMixin from "@/components/mixins/ActiveMetaMixin";
import IvzSearchForeignItem from "@/components/item/IvzSearchForeignItem.vue";

export default {
  name: "IvzSearchItem",
  props: ["meta", 'span'],
  mixins: [ActiveMetaMixin],
  components: {IvzSearchForeignItem, IvzDateTime},
  data() {
    return {
      model: null
    }
  },
  created() {
    this.meta['tabMetas'] = getSearchFormTabMetas(this.meta['type'])
    this.initSearchFormTabMeta(this.meta);
    this.model = this.meta['tabModel'];
  },

  methods: {
    ...mapMutations(['initSearchFormTabMeta']),
  }
}
</script>

<style scoped>
.ivz-search-item {
  border-radius: 3px;
  border: 1px dashed #efefef;
}
</style>
